<template>
  <div class="login-container">
    <!-- 顶部栏 -->
    <van-nav-bar title="登录页" left-text="返回" left-arrow @click-left="$router.back()" />
    <!-- 输入框 -->
    <van-form @submit="onSubmit">
  <van-field
    v-model="mobile"
    name="mobile"
    label="手机号"
    placeholder="请输入手机号"
    :rules="[{ required: true, message: '请填写用户名' },
    {
        pattern: /^(13[0-9]|14[014-9]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
        message: '手机号格式错误'
    }]"
  />
  <van-field
    v-model="code"
    type="text"
    name="code"
    label="验证码"
    placeholder="请输入验证码"
    :rules="[{ required: true, message: '请填写验证码' },
    {
        pattern: /^\d{6}$/,
        message: '验证码格式错误'
    }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" :loading="isLogin" loading-text="加载中..." >提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { userLogin } from './user.js'
import { saveToken } from '@/utils/token.js'
export default {
  name: "login",
  data() {
    return {
      mobile: '',
      code: '',
      isLogin: false,
    };
  },
  methods: {
    //   点击表单中的按钮触发
    onSubmit(values){
        console.log(values);
        // 按钮加载效果
        this.isLogin = true
        // 1.1 登录请求
        userLogin(values)
        .then(res=>{
            console.log(res);
            // （1）弹窗提示
            this.$toast.success('登录成功')
            // （2）取消按钮加载效果
            this.isLogin = false
            // （3）存token
            saveToken( res.data.data )
            // (4) 跳转首页
            this.$router.push({path: '/home'})
        })
        .catch(err=>{
          this.$toast.fail('登录失败')
        }).then(()=>{
          // 无论成功还是失败，只有请求完成了就要取消loading效果
          this.isLogin = false
        })
    }
  },
};
</script>

<style lang="less">
.login-container {
    .van-nav-bar__content {
        background-color: #009afb;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon-arrow-left {
            color: #fff;
        }
        .van-nav-bar__text {
            color: #fff;
        }
    }
}
</style>